<template>
  <div class="equip">
    <div class="wrapper">
      <!-- 综合数据 -->
      <div class="multi">
        <div class="multi-head">综合数据{{ "[" + position + "/" + name + ']' }}</div>
        <div class="multi-content">
          <div ref="multibar" class="multi-bar" />
          <div class="multi-pies">
            <!-- 总体PPI，总体CPK，累计生产，通过率 -->
            <div class="pies">
              <div class="pie">
                <div class="piechart">
                  <span class="chart">{{ ppi + '%' }}</span>
                  <span class="title">总体PPI</span>
                </div>
              </div>
              <div class="pie">
                <div class="piechart">
                  <span class="chart">{{ cpk }}</span>
                  <span class="title">总体CPK</span>
                </div>
              </div>
              <div class="pie">
                <div class="piechart">
                  <span class="chart">{{ totalprd }}</span>
                  <span class="title">累计生产</span>
                </div>
              </div>
              <div class="pie">
                <div class="piechart">
                  <span class="chart">{{ totalpct + '%' }}</span>
                  <span class="title">通过率</span>
                </div>
              </div>
            </div>
            <!-- 查询框 -->
            <div class="search">
              <div class="search-input">
                <div class="search-head">单板数据查询</div>
                <div class="search-content">
                  <el-input v-model="keyword" placeholder="请输入内容">
                    <i slot="prefix" class="el-input__icon el-icon-search" />
                  </el-input>
                </div>
              </div>
              <div class="search-times">
                <div class="search-head">统计数据查询</div>
                <div class="search-content">
                  <el-date-picker
                    v-model="datetimes"
                    type="daterange"
                    :picker-options="pickerOptions"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    value-format="yyyy-MM-dd"
                    format="yyyy-MM-dd"
                    align="right"
                    @change="dateChange"
                  />
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="infos">
        <!-- 炉温监控 -->
        <div class="info">
          <div class="info-head">炉温监控</div>
          <div ref="templine" class="info-content" />
        </div>
        <!-- 含氧量监控 -->
        <div class="info">
          <div class="info-head">含氧量监控</div>
          <div ref="oxygenline" class="info-content" />
        </div>
        <!-- 链速监控 -->
        <div class="info">
          <div class="info-head">链速监控</div>
          <div ref="wheelline" class="info-content" />
        </div>
        <!-- 风扇监控 -->
        <div class="info">
          <div class="info-head">风扇监控</div>
          <div ref="elefanline" class="info-content" />
        </div>
      </div>
      <!-- 生产板曲线和告警信息 -->
      <div class="product">
        <div class="product-line">
          <div class="line-head">生产板监控</div>
          <div class="line-content">
            <div ref="productline" class="product-charts" />
            <div class="product-htable">
              <!-- 炉温分析 -->
              <div class="temptable">
                <div class="table-head">炉温分析(单位: ℃)</div>
                <div class="table-content">
                  <div v-for="(e, i) in tmps" :key="'tmp' + i" class="titem">
                    <div class="thead">{{ e.index }}</div>
                    <div class="tcontent">{{ e.value }}</div>
                  </div>
                </div>
              </div>
              <!-- 风扇转速 -->
              <div class="efantable">
                <div class="table-head">风扇转速 上风扇和下风扇 (单位: HZ)</div>
                <div class="table-content">
                  <div class="table-body">
                    <div v-for="(e, i) in fans1" :key="'fan' + i" class="ttitem">
                      <div class="thead">{{ e.index }}</div>
                      <div class="tcontent">{{ e.value }}</div>
                    </div>
                  </div>
                  <div class="table-body">
                    <div v-for="(e, i) in fans2" :key="'fan' + i" class="ttitem">
                      <div class="thead">{{ e.index }}</div>
                      <div class="tcontent">{{ e.value }}</div>
                    </div>
                  </div>
                </div>
              </div>
              <!-- 含氧量值 -->
              <div class="oxygtable">
                <div class="table-head">氧含量(单位: PPM)</div>
                <div class="table-content">
                  <div v-for="(e, i) in oxys" :key="'oxy' + i" class="titem">
                    <div class="thead">{{ e.index }}</div>
                    <div class="tcontent">{{ e.value }}</div>
                  </div>
                </div>
              </div>
            </div>
            <div class="product-vtable">
              <!-- -->
              <div class="tables">
                <div class="mtable">
                  <div class="mtable-head">
                    <div class="mtleft">峰值温度</div>
                    <div class="mtright">PPI</div>
                  </div>
                  <div class="mtable-content">
                    <div class="mtitem">
                      <div class="lefth">{{ temp1.value }}</div>
                      <div class="right">{{ temp1.ppk }}</div>
                    </div>
                    <div class="detail" />
                  </div>
                </div>
                <div class="mtable">
                  <div class="mtable-head">
                    <div class="mtleft">恒温时间</div>
                    <div class="mtright">PPI</div>
                  </div>
                  <div class="mtable-content">
                    <div class="mtitem">
                      <div class="lefth">{{ temp2.value }}</div>
                      <div class="right">{{ temp2.ppk }}</div>
                    </div>
                    <div class="detail" />
                  </div>
                </div>
              </div>
              <!-- -->
              <div class="tables">
                <div class="mtable">
                  <div class="mtable-head">
                    <div class="mtleft">浸锡T时间</div>
                    <div class="mtright">PPI</div>
                  </div>
                  <div class="mtable-content">
                    <div class="mtitem">
                      <div class="lefth">{{ temp3.value }}</div>
                      <div class="right">{{ temp3.ppk }}</div>
                    </div>
                    <div class="detail" />
                  </div>
                </div>
                <div class="mtable">
                  <div class="mtable-head">
                    <div class="mtleft">冷却下降斜率</div>
                    <div class="mtright">PPI</div>
                  </div>
                  <div class="mtable-content">
                    <div class="mtitem">
                      <div class="lefth">{{ temp4.value }}</div>
                      <div class="right">{{ temp4.ppk }}</div>
                    </div>
                    <div class="detail" />
                  </div>
                </div>
              </div>
              <!-- -->
              <div class="tables">
                <div class="mtable">
                  <div class="mtable-head">
                    <div class="mtleft">预热上升斜率</div>
                    <div class="mtright">PPI</div>
                  </div>
                  <div class="mtable-content">
                    <div class="mtitem">
                      <div class="lefth">{{ temp5.value }}</div>
                      <div class="right">{{ temp5.ppk }}</div>
                    </div>
                    <div class="detail" />
                  </div>
                </div>
                <div class="mtable">
                  <div class="mtable-head">
                    <div class="mtleft">预热时间</div>
                    <div class="mtright">PPI</div>
                  </div>
                  <div class="mtable-content">
                    <div class="mtitem">
                      <div class="lefth">{{ temp6.value }}</div>
                      <div class="right">{{ temp6.ppk }}</div>
                    </div>
                    <div class="detail" />
                  </div>
                </div>
              </div>
              <!-- -->
            </div>
          </div>
        </div>
        <div class="product-warn">
          <div class="warn-head">告警信息</div>
          <!-- <div class="warn-content">
            <span class="warn-title">1项炉温告警 2021-05-05 12:00:00</span>
            <div class="warn-detail">1.炉温过高，请及时处理！</div>
          </div> -->
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import echarts from 'echarts'
import { deepClone } from '@/utils/index'
import { Equipment } from '@/api/datainterface'
import { getValue } from '@/utils/auth'

export default {
  name: 'Equip',
  props: {},
  data() {
    return {
      eqid: '',
      startDate: '',
      endDate: '',
      position: '',
      name: '',
      ppi: 0,
      cpk: 0,
      totalprd: 0,
      totalpct: 0,
      tmps: [],
      fans1: [],
      fans2: [],
      oxys: [],
      // 图表
      multibar: null,
      templine: null,
      oxygenline: null,
      wheelline: null,
      elefanline: null,
      productline: null,
      keyword: '',
      datetimes: [],
      temp1: { value: 0, ppk: 0 },
      temp2: { value: 0, ppk: 0 },
      temp3: { value: 0, ppk: 0 },
      temp4: { value: 0, ppk: 0 },
      temp5: { value: 0, ppk: 0 },
      temp6: { value: 0, ppk: 0 },
      pickerOptions: {
        shortcuts: [
          {
            text: '最近一周',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
              picker.$emit('pick', [start, end])
            }
          }
        ]
      },
      baseOption: {
        tooltip: {
          trigger: 'axis'
        },
        grid: {
          top: '12%',
          left: '5%',
          right: '8%',
          bottom: '5%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          axisLine: {
            show: true,
            lineStyle: {
              color: ['#7e7e8a'],
              width: 1,
              type: 'solid'
            }
          },
          axisTick: {
            show: false
          }
        },
        yAxis: {
          type: 'value',
          spiltLine: {
            show: false
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: ['#7e7e8a'],
              width: 1,
              type: 'solid'
            }
          },
          axisTick: {
            show: false
          }
        }
      },
      plotOption: {
        tooltip: {
          trigger: 'item',
          axisPointer: {
            type: 'shadow'
          }
        },
        grid: {
          top: '12%',
          left: '10%',
          right: '10%',
          bottom: '10%'
        },
        xAxis: {
          type: 'category',
          axisLine: {
            show: true,
            lineStyle: {
              color: ['#7e7e8a'],
              width: 1,
              type: 'solid'
            }
          },
          data: [],
          boundaryGap: true,
          nameGap: 30,
          splitArea: {
            show: false
          },
          axisLabel: {
            formatter: '{value}'
          },
          splitLine: {
            show: false
          }
        },
        yAxis: {
          type: 'value',
          name: '℃',
          splitArea: {
            show: false
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: ['#7e7e8a'],
              width: 1,
              type: 'solid'
            }
          },
          axisTick: {
            show: true
          }
        },
        series: [
          {
            name: 'boxplot',
            type: 'boxplot',
            data: [],
            tooltip: {
              formatter: function(param) {
                return [
                  '最大值: ' + param.data[1],
                  '平均值: ' + param.data[2],
                  '最小值: ' + param.data[3],
                  'Q3: ' + param.data[4],
                  'Q2: ' + param.data[5],
                  'Q1: ' + param.data[6]
                ].join('<br/>')
              }
            }
          },
          {
            name: '异常',
            type: 'scatter',
            data: []
          }
        ]
      }
    }
  },
  created() {
    this.position = getValue('space')
  },
  mounted() {
    this.$nextTick(() => {
      this.initEquip()
      this.initChart()
      this.getEquipment(this.eqid, this.datetimes[0], this.datetimes[1])
    })
  },
  destroyed() {
    this.multibar.dispose()
    this.multibar = null
    this.templine.dispose()
    this.templine = null
    this.oxygenline.dispose()
    this.oxygenline = null
    this.wheelline.dispose()
    this.wheelline = null
    this.elefanline.dispose()
    this.elefanline = null
    this.productline.dispose()
    this.productline = null
  },
  methods: {
    initEquip() {
      this.eqid = parseInt(this.$route.query.id)
      const startDate = this.$route.query.date
      this.datetimes.push(startDate)
      const endDate = this.$route.query.date
      this.datetimes.push(endDate)
      const name = this.$route.query.name
      this.name = name
    },
    dateChange(val) {
      if (val && val.length == 2) {
        this.getEquipment(this.eqid, val[0], val[1])
      }
    },
    // 综合数据
    initMultibar(data) {
      const multibarOption = deepClone(this.baseOption)
      multibarOption.title = {
        text: '生产数量',
        left: 'center',
        textStyle: {
          fontWeight: 'bold ',
          color: '#0894e3',
          fontSize: 18
        }
      }
      multibarOption.yAxis.name = '单位'
      multibarOption.xAxis.type = 'time'
      multibarOption.series = [
        {
          data: data,
          showSymbol: false,
          type: 'bar',
          itemStyle: {
            normal: {
              color: function(params) {
                const colorList = ['#16c5e4', '#f8a059', '#0894e3', '#53e6b2', '#91c7ae', '#749f83', '#ca8622']
                return colorList[params.dataIndex]
              }
            }
          }
        }
      ]
      this.multibar = echarts.init(this.$refs.multibar)
      this.setOptions(this.multibar, multibarOption)
    },
    // 炉温
    initTemp(xdatas, ydatas, zdatas) {
      this.templine = echarts.init(this.$refs.templine)
      this.plotOption.xAxis.data = xdatas
      this.plotOption.series[0].data = ydatas
      this.plotOption.series[1].data = zdatas
      this.setOptions(this.templine, this.plotOption)
    },
    initOxygen(series) {
      const oxygenOption = deepClone(this.baseOption)
      oxygenOption.series = series
      oxygenOption.yAxis.name = 'PPM'
      oxygenOption.xAxis.type = 'time'
      this.oxygenline = echarts.init(this.$refs.oxygenline)
      this.setOptions(this.oxygenline, oxygenOption)
    },
    // 链速
    initWheel(series) {
      const wheelOption = deepClone(this.baseOption)
      wheelOption.series = series
      wheelOption.yAxis.name = 'CM/MIN'
      wheelOption.xAxis.type = 'time'
      this.wheelline = echarts.init(this.$refs.wheelline)
      this.setOptions(this.wheelline, wheelOption)
    },
    // 风扇
    initElefan(series) {
      const elefanOption = deepClone(this.baseOption)
      elefanOption.series = series
      elefanOption.yAxis.name = 'HZ'
      elefanOption.xAxis.type = 'time'
      this.elefanline = echarts.init(this.$refs.elefanline)
      this.setOptions(this.elefanline, elefanOption)
    },
    // 生产板曲线
    initProduct(data) {
      const productOption = deepClone(this.baseOption)
      //productOption.xAxis.data = xdatas
      productOption.xAxis.type = 'time'
      productOption.series = [{
        type: 'line',
        data: data,
        showSymbol: false
      }]
      productOption.yAxis.name = ''
      productOption.grid = {
        top: '12%',
        left: '5%',
        right: '10%',
        bottom: '5%',
        containLabel: true
      }
      this.productline = echarts.init(this.$refs.productline)
      this.setOptions(this.productline, productOption)
    },
    initChart() {
      this.initMultibar([0], [0])
      this.initTemp([0], [0], [0])
      this.initOxygen([0], [0])
      this.initWheel([0], [0])
      this.initElefan([0], [0])
      this.initProduct([0], [0])
    },
    setOptions(chart, options) {
      chart.setOption(options)
    },
    getEquipment(eqid, start, end) {
      Equipment({ id: eqid, startDate: start + ' 00:00:00', endDate: end + ' 23:59:59' }).then(res => {
        if (res.code == -1)
          return
        console.info(res.data)
        // 综合数据
        if (res.data.product) {
          const data = []
          res.data.product.forEach(e => {
            data.push([e.startTime, e.prdCount])
          })
          this.initMultibar(data)
        }
        // 炉温数据
        if (res.data.rtZoneAnaInfoSpec) {
          const xdatas = []; const ydatas = []; const zdatas = []
          res.data.rtZoneAnaInfoSpec.forEach(e => {
            xdatas.push(e.index)
            ydatas.push([e.maxVal, e.avgVal, e.minVal, e.q3, e.q2, e.q1])
            zdatas.push(e.bFarout ? [e.index, e.bFarout] : [])
          })
          this.initTemp(xdatas, ydatas, zdatas)
        }
        // 链速监控
        if (res.data.rtcsAnaInfoSpec) {
          const series = []
          res.data.rtcsAnaInfoSpec.forEach(e => {
            const data = []
            e.data.forEach(ee => {
              data.push([ee.monitorTime, ee.value])
            })
            series.push({ type: 'line', name: e.specsName, data: data })
          })
          this.initWheel(series)
        }
        // 含氧量监控
        if (res.data.oxyAnaInfoSpec) {
          const series = []
          res.data.oxyAnaInfoSpec.forEach(e => {
            const data = []
            e.data.forEach(ee => {
              data.push([ee.monitorTime, ee.value])
            })
            series.push({ type: 'line', name: e.specsName, data: data })
          })
          this.initOxygen(series)
        }
        // 风扇监控
        if (res.data.fanAnaInfoSpec) {
          const series = []
          res.data.fanAnaInfoSpec.forEach(e => {
            const data = []
            e.data.forEach(ee => {
              data.push([ee.monitorTime, ee.value])
            })
            series.push({ type: 'line', name: e.specsName, data: data })
          })
          this.initElefan(series)
        }
        // 生产板监控
        if (res.data.top10Prd) {
          const data = []
          res.data.top10Prd.forEach(e => {
            data.push([e.startTime, e.elapsedTime])
          })
          this.initProduct(data)
        }
        this.ppi = res.data.ca ?? ''
        this.cpk = res.data.cpk ?? ''
        this.totalprd = res.data.prdCount ?? ''
        this.totalpct = res.data.passRate ?? ''
        if (res.data.lastRTZone) {
          this.tmps = []
          res.data.lastRTZone.forEach(e => {
            this.tmps.push({ index: e.index, value: e.value })
          })
        }
        if (res.data.lastFan) {
          this.fans1 = []
          this.fans2 = []
          res.data.lastFan.forEach(e => {
            if (this.fans1.length < 10) { 
              this.fans1.push({ index: e.index, value: e.value }) 
            } else { 
              this.fans2.push({ index: e.index, value: e.value }) 
            }
          })
        }
        if (res.data.lastOxy) {
          this.oxys = []
          res.data.lastOxy.forEach(e => {
            this.oxys.push({ index: e.index, value: e.value })
          })
        }
        this.temp1 = { value: 0, ppk: 0 }
        this.temp2 = { value: 0, ppk: 0 }
        this.temp3 = { value: 0, ppk: 0 }
        this.temp4 = { value: 0, ppk: 0 }
        this.temp5 = { value: 0, ppk: 0 }
        this.temp6 = { value: 0, ppk: 0 }
        if (res.data.lastPrdMt) {
          res.data.lastPrdMt.forEach(e => {
            if (e.specsName == '峰值温度') {
              this.temp1 = { value: e.value, ppk: e.ca }
            } else if (e.specsName == '恒温时间') {
              this.temp2 = { value: e.value, ppk: e.ca }
            } else if (e.specsName == '浸锡T时间') {
              this.temp3 = { value: e.value, ppk: e.ca }
            } else if (e.specsName == '冷却下降斜率') {
              this.temp4 = { value: e.value, ppk: e.ca }
            } else if (e.specsName == '预热上升斜率') {
              this.temp5 = { value: e.value, ppk: e.ca }
            } else if (e.specsName == '预热时间') {
              this.temp6 = { value: e.value, ppk: e.ca }
            }
          })
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
$back_black: #111320;
$card_black: #262c3c;
$card_header: #282834;
$red_header: #de4f49;
.equip {
  display: inline-block;
  width: 100%;
  background: $back_black;
  padding-bottom: 20px;
  .wrapper {
    .multi {
      height: 320px;
      margin-top: 20px;
      margin-left: 20px;
      margin-right: 20px;
      .multi-head {
        background: $card_header;
        height: 40px;
        color: #7e7e8a;
        padding: 10px;
        font-size: 16px;
      }
      .multi-content {
        background: $card_black;
        height: 280px;
        display: flex;
        .multi-bar {
          flex: 1;
        }
        .multi-pies {
          flex: 1;
          .pies {
            display: flex;
            .pie {
              flex: 1;
              position: relative;
              text-align: center;
              margin-top: 20px;
              .piechart {
                display: inline-block;
                border-radius: 50%;
                width: 90px;
                height: 90px;
                border: #7e7e8a 1px solid;
                .chart {
                  position: absolute;
                  left: 50%;
                  top: 50%;
                  transform: translate(-50%, -50%);
                  color: #d6a65c;
                  font-size: 18px;
                  font-weight: bolder;
                }
                .title {
                  position: absolute;
                  left: 50%;
                  bottom: -40%;
                  transform: translate(-50%, -50%);
                  color: #7e7e8a;
                  font-size: 18px;
                }
              }
            }
          }
          .search {
            margin-top: 50px;
            height: 100px;
            display: flex;
            .search-input {
              flex: 1;
              margin: 10px;
              .search-head {
                background: $card_header;
                color: #7e7e8a;
                font-size: 10px;
                padding: 4px;
              }
              .search-content { }
            }
            .search-times {
              @extend .search-input;
              .search-head { }
              .search-content { }
            }
          }
        }
      }
    }
    .infos {
      height: 320px;
      margin-top: 20px;
      margin-left: 20px;
      display: flex;
      .info {
        flex: 1;
        margin-right: 20px;
        .info-head {
          background: $card_header;
          height: 40px;
          color: #7e7e8a;
          padding: 10px;
          font-size: 16px;
        }
        .info-content {
          background: $card_black;
          height: 280px;
        }
      }
    }
    .product {
      height: 320px;
      display: flex;
      .product-line {
        flex: 1;
        margin-top: 20px;
        margin-left: 20px;
        .line-head {
          background: $card_header;
          height: 40px;
          color: #7e7e8a;
          padding: 10px;
          font-size: 16px;
        }
        .line-content {
          background: $card_black;
          height: 260px;
          display: flex;
          .product-charts {
            flex: 3;
          }
          .product-htable {
            flex: 5;
            .temptable {
              margin: 10px;
              .table-head {
                background: $card_header;
                height: 20px;
                color: #7e7e8a;
                padding: 5px;
                font-size: 12px;
              }
              .table-content {
                display: block;
                background: #333647;
                height: 50px;
                min-height: 50px;
                overflow: hidden;
                .titem {
                  height: 50px;
                  display: inline-block;
                  .thead {
                    color: #7e7e8a;
                    font-size: 12px;
                    padding: 5px 10px;
                  }
                  .tcontent {
                    color: #02be5f;
                    font-size: 16px;
                    padding: 5px 10px;
                  }
                }
                .table-body {
                  display: flex;
                  flex-direction: row;
                  .ttitem {
                      height: 25px;
                      display: inline-block;
                    .thead {
                      color: #7e7e8a;
                      font-size: 6px;
                      padding: 0 10px;
                    }
                    .tcontent {
                      color: #02be5f;
                      font-size: 8px;
                      padding: 0 10px;
                    }
                  }
                }
              }
            }
            .efantable {
              @extend .temptable;
            }
            .oxygtable {
              @extend .temptable;
            }
          }
          .product-vtable {
            flex: 2;
            .tables {
              display: flex;
              .mtable {
                flex: 1;
                margin: 10px 5px 0 0;
                .mtable-head {
                  background: $card_header;
                  height: 20px;
                  color: #7e7e8a;
                  padding: 5px;
                  font-size: 12px;
                  .mtleft {
                    float: left;
                    color: #7e7e8a;
                  }
                  .mtright {
                    float: right;
                    color: #7e7e8a;
                  }
                }
                .mtable-content {
                  background: #333647;
                  height: 50px;
                  display: flex;
                  flex-direction: column;
                  .mtitem {
                    padding: 5px;
                    flex: 1;
                    .lefth {
                      color: #02be5f;
                      font-size: 16px;
                      float: left;
                    }
                    .right {
                      color: #02be5f;
                      font-size: 16px;
                      float: right;
                    }
                  }
                  .detail {
                    flex: 1;
                    vertical-align: bottom;
                    padding: 5px;
                    color: #7e7e8a;
                    font-size: 12px;
                  }
                }
              }
            }
          }
        }
      }
      .product-warn {
        width: 320px;
        margin-top: 20px;
        margin-left: 20px;
        margin-right: 20px;
        border: $red_header 2px solid;
        .warn-head {
          background: $red_header;
          height: 40px;
          color: #fff;
          padding: 12px;
          font-size: 14px;
        }
        .warn-content {
          background: $card_black;
          height: 255px;
          padding: 5px;
          .warn-title {
            color: #7e7e8a;
            font-size: 16px;
          }
          .warn-detail {
            color: #7e7e8a;
            font-size: 10px;
          }
        }
      }
    }
  }
}
</style>
